<html>
<head>
    <title>Testing dojox.dtl using animation to change attributes</title>
    <script src="../../../dojo/dojo.js" djConfig="parseOnLoad: true, usePlainJson: true"></script>
    <script>
        dojo.require("dijit._WidgetBase");
        dojo.require("dojox.dtl._DomTemplated");
        dojo.declare("demo.Animation", [dijit._WidgetBase, dojox.dtl._DomTemplated], {
                    buffer        : 0, // Note: Sensitivity is 0 by default, but this is to emphasize we're not doing any buffering
                    templateString: dojo.cache("dojox.dtl.demos.templates", "animation.html"),
                    constructor   : function (props, node) {
                        console.debug("constructor");
                        this.x = 0;
                        this.y = 0;
                    },
                    postCreate    : function () {
                        var anim = new dojo.Animation({
                            curve   : [0, 300],
                            rate    : 10,
                            duration: 5000,
                            easing  : dojo._defaultEasing
                        });
                        dojo.connect(anim, "onAnimate", this, "_reDraw");
                        anim.play();
                    },
                    _reDraw       : function (obj) {
                        this.x = obj;
                        this.y = Math.sqrt(obj) * 10;
                        dojo.style(this.blue, "left", this.x);
                        dojo.style(this.blue, "top", this.y + 10);
                        this.render();
                    }
                });
        dojo.require("dojo.parser");
    </script>
</head>
<body>
<div dojoType="demo.Animation"></div>
</body>
</html>
